<template>
    <div class="elm-select-tree"  ref="tree">
        <el-popover placement="bottom" :width="treeWidth" trigger="click" v-model="visible" popper-class="select-el-popover"  @show="show">
            <div style="user-select:none;height:400px;">
                <elm-table-tree :show-header="false" style="user-select:none;" :data="nodes" @row-click="rowClick" :default-expand-all="defaultExpandAll" :page-size="99999">
                    <el-table-column>
                        <template v-slot="scope">
                            <template v-if="scope.row.children">
                                <i class="el-icon-folder-opened" style="color:#0094ff;"></i>
                            </template>
                            <template v-else>
                                <i class="el-icon-tickets" style="color:#0094ff;"></i>
                            </template>
                            {{scope.row.type}}
                        </template>
                    </el-table-column>
                </elm-table-tree>
            </div>
            <el-input slot="reference" v-model="ntext" placeholder="请选择" suffix-icon="el-icon-arrow-down" style="cursor:pointer" v-loading="loading&loading1"
                      :clearable="true"
                      @input.native.prevent="preventInput"
                      @clear="clear" :disabled="disabled"></el-input>
        </el-popover>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                loading1: false,
                nodes: [],
                visible: false,
                ntext: null,
                nvalue: null,
              d_ntext:null,
              treeWidth:400,
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: String,
                default: function () {
                    return null;
                }
            },
            text: {
                type: String,
                default: function () {
                    return null;
                }
            },
            "default-expand-all": {
                type: Boolean,
                default: function () {
                    return true;
                }
            },
            disabled: {
              type: Boolean,
              default: function () {
                return false;
              }
            },
        },
        watch: {
            value: {
                async handler(newval, oldval) {
                    if (newval != null) {
                        var t = "";
                        this.loading1 = true;
                        var texts = await elm.post('/system/login/GetGoodsTypePath', { id: newval });
                        for (var text of texts) {
                            t = text.type + "/" + t;
                        }
                        this.$emit('update:text', t.substr(0, t.length - 1));
                        this.d_ntext = this.ntext = t.substr(0, t.length - 1);
                        this.loading1 = false;
                      this.$emit('changed',newval,this.ntext);
                    }
                },
                immediate: true
            }
        },
        created() {
            this.load();
        },
        methods: {
          preventInput(event) {
            var target = event.target || event.srcElement;
            target.value = this.d_ntext;
          },
          show(){
            const rect = this.$refs.tree.getBoundingClientRect();
            this.treeWidth= parseInt(rect.width);
          },
            async load() {
                this.loading = true;
                this.nodes = await elm.post('/system/login/GetGoodsTypeTree',{});
                this.loading = false;
            },
            rowClick(row) {
                this.nvalue = row.id;
                this.$emit('update:value', row.id);
                this.$emit('change', row.id,row);
              this.visible = false;
            },
            clear() {
                this.$emit('update:value', null);
                this.$emit('update:text', null);
                this.nvalue = null;
                this.ntext = null;
            }
        }
    }
</script>
<style scoped>
</style>